<template>
  <div class="hello">
    <h2>zyOffice for vue-quill-editor</h2>
     <div>
        <quill-editor ref="edt" 
        v-model="content" 
        :options="editorOption" 
        style="height:600px;"
        @ready="editorReady($event)"></quill-editor>
    </div>    
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor';
import '../../static/zyoffice/js/BlockEmbed'
import {zyOffice} from '../../static/zyoffice/js/w'
import '../../static/layer-v3.1.1/layer/layer'
import '../../static/layer-v3.1.1/layer/theme/default/layer.css'
export default {
  name: 'HelloWorld',    
  components: {
      quillEditor
    },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      content:"",
      editorOption:{modules:{toolbar:{
        container:[
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{'header': 1}, {'header': 2}],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],
  [{'indent': '-1'}, {'indent': '+1'}],
  [{'direction': 'rtl'}],
  [{'size': ['small', false, 'large', 'huge']}],
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  [{'color': []}, {'background': []}],
  [{'font': []}],
  [{'align': []}],
  ['clean', 'link', 'image', 'video'],
  ['zyoffice','zywordexport','zyofficepdf']//新添加的工具
        ],
        handlers:{
          zyoffice:function(){
            zyOffice.getInstance().api.openDoc();
          },
          zywordexport:function(){
            zyOffice.getInstance().api.exportWord();
          },
          zyofficepdf:function(){
            zyOffice.getInstance().api.openPdf();
          }          
        }
      }}}
    }
  },
  mounted(){
  },
  methods:{
    editorReady(quill){
      zyOffice.getInstance({
          word: 'http://localhost:13710/zyoffice/word/convert',
          wordExport: 'http://localhost:13710/zyoffice/word/export',
          pdf: 'http://localhost:13710/zyoffice/pdf/upload'          
      });//加载控件

      zyOffice.getInstance().SetEditor(quill);
      this.addButtons();
    },
    addButtons(){
      $(".ql-zyoffice").append('<img title="导入Word文档（docx格式）" width="16" height="16" src=""/>');      
      $(".ql-zywordexport").append('<img title="导出Word文档（docx格式）" width="16" height="16" src=""/>');
      $(".ql-zyofficepdf").append('<img title="导入PDF文档" width="16" height="16" src=""/>');
    },
    onEditorChange({ editor, html, text }) 
    {
      this.content = html;
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
